<template>
  <div class="main-box">
    <div v-if="this.$store.state.user.userIsPhone">
      <PageFoot :activeProps="active" />
    </div>
    <div v-else class="page-head">
      <PageHeader />
    </div>
    <div class="search-box">
      <Search />
    </div>
    <div class="step-box">
      <div class="step-item" v-for="(item, index) in titleArr" :key="index">
        <div @click="selectItem(index)">
          <i
            :class="
              active === index
                ? 'iconfont icon-yuanquanxuanzhong'
                : 'iconfont icon-yuanquan'
            "
          ></i>
        </div>
        <div class="step-title" @click="selectItem(index)">
          {{ item.stageName }}
        </div>
        <div class="icon" v-if="index != 6">
          <i class="iconfont icon-jiantou_yemian_xiangyou"></i>
        </div>
        <div class="icon" v-else>
          <i class="iconfont icon-24gf-ellipsis" @click="getAllProjectData"></i>
        </div>
      </div>
    </div>
    <el-tabs
      v-model="activeName"
      type="card"
      @tab-click="buttonClick"
      v-if="false"
    >
      <el-tab-pane label="打卡信息统计" name="first">
        <div class="screen-box">
          <div>筛选条件</div>
          <input type="text" placeholder="请输入关键字" v-model="keyWord" />
          <el-date-picker
            v-model="startTime"
            type="date"
            placeholder="请选择开始日期"
          >
          </el-date-picker>
          <el-date-picker
            v-model="endTime"
            type="date"
            placeholder="请选择结束日期"
          >
          </el-date-picker>
          <el-select v-model="value" placeholder="请选择状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </el-tab-pane>
      <el-tab-pane label="剩余假期统计表" name="second">
        <div class="screen-box">
          <div>筛选条件</div>
          <input type="text" placeholder="请输入关键字" v-model="keyWord" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="员工请假表" name="third">
        <div class="screen-box">
          <div>筛选条件</div>
          <input type="text" placeholder="请输入关键字" v-model="keyWord" />
          <el-date-picker
            v-model="startTime"
            type="date"
            placeholder="请选择开始日期"
          >
          </el-date-picker>
          <el-date-picker
            v-model="endTime"
            type="date"
            placeholder="请选择结束日期"
          >
          </el-date-picker>
          <el-select v-model="value" placeholder="请选择流程状态">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </el-tab-pane>
    </el-tabs>

    <div class="table-box">
      <Table
        :tableData="showProData"
        :openInfoDrawer="openInfoDrawer"
        :activeName="activeName"
        :openCost="openCost"
        :openUpdate="openUpdate"
        :openAnnexAndMilestoner="openAnnexAndMilestoner"
        :openCollection="openCollection"
      />
    </div>
    <div class="drawer-box">
      <Drawer ref="infoDrawerRef" :drawer="drawer" :projectRow="projectRow" />
    </div>
    <div class="drawer-box">
      <CostDrawer
        ref="costDrawerRef"
        :drawer="drawer"
        :projectRow="projectRow"
      />
    </div>
    <div class="drawer-box">
      <UpdateDrawer
        ref="updataDrawerRef"
        :drawer="drawer"
        :projectRow="projectRow"
      />
    </div>
    <div class="drawer-box">
      <MilAndAnnexDrawer
        ref="annexAndMilestoneRef"
        :drawer="drawer"
        :projectRow="projectRow"
      />
    </div>
    <div class="drawer-box">
      <CollectionDrawer
        ref="collectionDrawerRef"
        :drawer="drawer"
        :projectRow="projectRow"
      />
    </div>
  </div>
</template>


<script>
import PageHeader from "@/components/PageHeader.vue";
import PageFoot from "@/components/PageFoot.vue";
import Search from "@/components/Search.vue";
import Table from "./ui/Table.vue";
import Drawer from "./ui/Drawer.vue";
import CostDrawer from "./ui/CostDrawer.vue";
import UpdateDrawer from "./ui/UpdateDrawer.vue";
import MilAndAnnexDrawer from "./ui/MilAndAnnexDrawer.vue";
import CollectionDrawer from "./ui/CollectionDrawer.vue";

import { getStageProjectListApi } from "@/api/index";
export default {
  data() {
    return {
      // 控制状态点高亮
      active: null,
      // 状态数组
      titleArr: [
        {
          proStage: "SalesResearch",
          stageName: "售前调研",
        },
        {
          proStage: "Develop",
          stageName: "研发阶段",
        },
        {
          proStage: "ElectricImplement",
          stageName: "电气实施",
        },
        {
          proStage: "Design",
          stageName: "产品设计",
        },
        {
          proStage: "DebugTogether",
          stageName: "联调阶段",
        },
        {
          proStage: "Waiting4Sign",
          stageName: "等待验收",
        },
        {
          proStage: "Finish",
          stageName: "已完成",
        },
      ],
      // 展示的项目源数据
      showProData: [],
      // 抽屉是否弹出
      drawer: false,
      // 当前点击的项目
      projectRow: null,

      activeName: "first",
      tableActive: 1,
      keyWord: "",
      startTime: "",
      endTime: "",
      options: [
        {
          value: "选项1",
          label: "正常",
        },
        {
          value: "选项2",
          label: "请假",
        },
        {
          value: "选项3",
          label: "旷工",
        },
        {
          value: "选项4",
          label: "出差",
        },
      ],
      value: "",
      options2: [
        {
          value: "选项1",
          label: "已同意",
        },
        {
          value: "选项2",
          label: "已驳回",
        },
        {
          value: "选项3",
          label: "审批中",
        },
      ],
      value2: "",
    };
  },
  watch: {
    showProData(nv, ov) {
      this.showProData.forEach((item, index) => {
        this.showProData[index].procity = item.proprovince + "-" + item.procity;
        let stageItem = this.titleArr.find((stageItem) => {
          return item.prostage === stageItem.proStage;
        });
        this.showProData[index].stageName = stageItem.stageName;
      });
      console.log("showProData------->", this.showProData);
    },
  },
  components: {
    PageHeader,
    Search,
    Table,
    Drawer,
    CostDrawer,
    UpdateDrawer,
    MilAndAnnexDrawer,
    CollectionDrawer,
    PageFoot,
  },

  mounted() {
    this.getAllProjectData();
  },

  methods: {
    // 获取全部项目数据
    async getAllProjectData() {
      this.active = null;
      let res = await getStageProjectListApi();
      this.showProData = res;
    },
    // 阶段选择事件
    async selectItem(id) {
      this.active = id;
      let data = {
        prostage: this.titleArr[id].proStage,
      };
      let res = await getStageProjectListApi(data);
      this.showProData = res;
    },

    // 打开费用信息抽屉
    openCost(row) {
      this.projectRow = { ...row };
      this.$refs.costDrawerRef.openDrawer(row);
    },

    // 打开基本信息查看抽屉
    openInfoDrawer(row) {
      this.projectRow = { ...row };
      this.$refs.infoDrawerRef.openDrawer(row);
    },
    // 打开编辑基本信息抽屉
    openUpdate(row) {
      console.log("openUpdate------>", row);
      this.projectRow = { ...row };
      this.$refs.updataDrawerRef.openDrawer(row);
    },

    // 打开回款信息
    openCollection(row) {
      this.projectRow = { ...row };
      this.$refs.collectionDrawerRef.openDrawer(row);
    },

    // 打开附件与里程碑抽屉
    openAnnexAndMilestoner(row) {
      this.projectRow = { ...row };
      this.$refs.annexAndMilestoneRef.openDrawer(row);
    },

    buttonClick(num) {
      console.log(num);
      this.tableActive = num;
    },
  },
};
</script>


<style lang="scss" >
.main-box {
  background: #f3f6ff;
}
.search-box {
  /* border: 1px solid red; */
  width: 25%;
  margin-left: 10%;
  margin-top: 20px;
}

.table-box {
  /* border: 1px solid blue; */
  width: 80%;
  height: 500px;
  margin-left: 10%;
  margin-top: 10px;
  /* overflow: auto; */
}

.step-box {
  /* height: 50px; */
  width: 85%;
  margin-top: 10px;
  margin-left: 10%;
  /* border: 1px solid red; */
  display: flex;

  .step-item {
    width: 160px;
    height: 35px;
    line-height: 200%;
    display: flex;
    /* background: #f3f6ff; */

    .step-title {
      width: 70px;
      margin-right: 20px;
      color: black;
    }

    .icon {
      width: 30px;
    }
  }

  .step-item:hover {
    cursor: pointer;
  }
}

.head-step {
  /* border: 1px solid red; */
  display: flex;
  width: 600px;
  height: 40px;
  margin: 10px;
  margin-left: 150px;

  > div {
    border: 1px solid #aeb0b6;
    height: 40px;
    width: 150px;
    text-align: center;
    line-height: 40px;
    margin-right: 10px;
  }

  > div:hover {
    cursor: pointer;
    background: rgba($color: #aeb0b6, $alpha: 0.5);
  }
}

.screen-box {
  /* border: 1px solid red; */
  width: 80%;
  margin-left: 150px;

  > input {
    border: 1px solid #e4e6ec;
    height: 25px;
    margin-top: 5px;
    margin-right: 5px;
  }
}

.el-date-editor {
  margin-right: 5px;
}

.el-tabs__nav-scroll {
  /* border: 1px solid red; */
  width: 600px;
  margin-left: 150px;
}
</style>